<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 80%;
            margin: 0 auto;
        }

        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        thead {
            background-color: #ff6700;
            height: 40px;
            color: green;
        }

        h3 {
            text-align: center;
            color: skyblue;
        }
    </style>
</head>
<body>
<!--
     网页中通过表格的形式展示学生信息
     学号  名字  年龄  分数  性别
-->
<h3>学生信息表</h3>
<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>名字</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    </thead>
    <tbody id="tbd"></tbody>
</table>

<script>

    //  假定以下数据时通过http请求 返回的后端数据库数据  数组   {}  []   [{},{}]
    var students = [
        {
            stuNo: '20241231001',
            name: 'lisi1',
            age: 20,
            sex: '男',
            score: 90
        },
        {
            stuNo: '20241231001',
            name: 'lisi1',
            age: 20,
            sex: '男',
            score: 90
        }
    ]

    //  如何获取数组中的元素  数组名[索引] 数组中的元素索引从0开始编号
    console.log(students[0])
    console.log(students[1])
    console.log(students[2])
    //  数组名.length   获取数组中元素的个数   3   0  1  2

    // 获取  tbody

    var tbd =  document.getElementById("tbd")

    for (var index = 0; index < students.length; index++) {
        // 如何将遍历的每一个对象 添加到页面中  tr形式进行展示    DOM
        /*
        *  <tr>
                <td>20241231001</td>
                <td>李四</td>
                <td>20</td>
                <td>98</td>
                <td>男</td>
          </tr>
        *
        *
        * */

        // 创建行  dom   <tr></tr>
        var  tr =    document.createElement('tr')
        // tr 中 需要添加几个 td  遍历对象  属性  =>  td
        for (var studentKey in students[index]) {
            // td  <td></td>
            var td = document.createElement("td")
            // 添加内容  td
            td.innerText = students[index][studentKey]
            //添加子节点
            tr.append(td)
        }

        // 添加tr  => tbody
        tbd.append(tr)
    }


</script>

</body>
</html>